<template>
  <div class="login-box">
      <div class="login-form">
          <div class="pic-item">
              <img src="../assets/images/login1.jpeg" alt="login">
          </div>     
          <div class="login">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="账号密码登录" name="first">
                      <account-login-form/>
                  </el-tab-pane>
                  <el-tab-pane label="短信验证码登录" name="second">
                      <sms-login-form/>
                  </el-tab-pane>
                  <el-tab-pane label="邮箱登录" name="third">
                      <email-login-form/>
                  </el-tab-pane>
                  <el-tab-pane label="页面配置" name="fore">
                      配置
                  </el-tab-pane>
                  <!-- 登录方式组件 -->
                  <login-way-com />
              </el-tabs>
              
          </div>
      </div>
  </div>
</template>

<script setup>
import AccountLoginForm from '../components/sonComponent/AccountLoginForm.vue'
import SmsLoginForm from '../components/sonComponent/SmsLoginForm.vue'
import EmailLoginForm from '../components/sonComponent/EmailLoginForm.vue'
import LoginWayCom from '../components/sonComponent/LoginWayCom.vue'
import { ref } from 'vue'

const activeName = ref('first')
const handleClick = (tab, event) => {
console.log(tab, event)
}
</script>

<style lang="less" scoped>
.login-box{
  width: 100%;
  height: 100%;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  padding-top: 6%;
  .login-form{
      width: 60%;
      height: 70%;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
      .pic-item{
          width: 40%;
          height: 100%;
          float: left;
          img{
              width: 100%;
              height: 100%;
          }
      }
      .login{
          width: 55%;
          height: 100%;
          float: left;
          overflow-y: auto;
          background-color: rgb(246, 246, 246);
          .demo-tabs{
              height: 100%; 
          }
      //    ::v-deep .demo-tabs{
      //         .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{
      //             // margin-left: 23%;
      //         }
      //     }
          .demo-tabs > .el-tabs__content {
              padding: 32px;
              color: #6b778c;
              font-size: 32px;
              font-weight: 600;
          }
      }
  }
}
</style>